<!-- 首页 -->
<template>
	<view class="page_box vwh">
		<!-- 空白页 -->
		<view class="page_box h100 df-y">
			<!-- 导航栏 -->
			<view class="head_box" :style="{ background: bgcolor }">
				<view :style="{height:customBar+'px'}" class="cu-bg">
					<image style="width: 750rpx;" :src="temImgUrl+'/chashantop.png'" mode="widthFix"></image>
				</view>
				<cu-custom :isBack="false" :showBackIcon="false">
					<block slot="backText">
						<text class="nav-title shopro-selector-rect">茶能成事</text>
					</block>
				</cu-custom>
			</view>
			<view class="content df-yc h100">
				<view class="scroll-content h100 df-yc">
					<scroll-view scroll-y="true">
						<!-- 导航栏背景 -->
						<view style="height: 500rpx;" class="nav-bg">
							<!-- 导航栏文字 -->
							<view class="text df-yc">
								<text style="font-size:50rpx;font-weight: bold;">喝好茶成好事</text>
								<text style="font-weight: 300;" class="fs26 mt30">- 愿每一杯好茶，都相伴成事 -</text>
							</view>
							<image class='image' style="width: 750rpx;" :src="temImgUrl+'/chashantop.png'"
								mode="widthFix">
							</image>
						</view>
						<!-- 主要内容 -->
						<view class="swiper-content">
							<u-sticky :offset-top="stickyTop">
								<v-tab lineColor="#B83F46" height="110rpx" v-model="current" :lineScale='0.2'
									lineRadius='3rpx' lineHeight='6rpx' :scroll="false" activeColor="#B83F46"
									color="rgba(169, 58, 65, 0.5)" :tabs='tabs'></v-tab>
							</u-sticky>
							<view>
								<view class="wh100 df-yc">
									<teaHill v-show="current==0"></teaHill>
									<view class="px30" v-for="(item,index) in aboutUsData" :key="index"
										v-show="current==index&&item.name!='茶山'">
										<view class="richText pa30 bs">
											<u-parse :tag-style="style" :html="item.data.content">
											</u-parse>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<shopro-tabbar></shopro-tabbar>
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
	import vTab from './components/v-tabs/v-tabs.vue'
	import teaHill from './components/tea-hill.vue'
	import technology from './components/technology.vue'
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';

	export default {
		props: {
			viewId: String
		},
		components: {
			vTab,
			teaHill,
			technology

		},
		data() {
			return {
				temImgUrl: this.$IMG_URL_TEMP,
				current: 0,
				currentBox: 0,
				bgcolor: 'transparent',
				swiperCurrentIndex: 0,
				//栏目数据
				tabs: [],
				dataList: [],
				style: {
					p: 'font-size:30rpx',
					span: 'font-size: 26rpx'
				},
				screenWidth:0
			};
		},
		computed: {
			...mapState({
				customBar: state => state.init.customBar,

			}),
			aboutUsData() {
				return this.$store.state.init.aboutUsData
			},
			stickyTop() {
				let stickyTop = 750 * this.customBar / this.screenWidth
				return stickyTop
			}
		},
		created() {
			const that=this
			this.getaAboutUs()
			uni.getSystemInfo({
				success: function(e) {
					that.screenWidth =e.screenWidth
				}
			})
		},
		methods: {
			changeSwiperBox(i) {
				this.currentBox = i.detail.current
			},
			changeSwiperContent(i) {
				this.current = i.detail.current
			},
			changeFollowSwiper(e) {
				this.base = 0
				this.current = e.detail.current;
			},
			//获取介绍数据
			getaAboutUs() {
				this.$api('introduce').then(res => {
					this.dataList = res.data.template[1].content.list
					let arr = []
					res.data.template[1].content.list.map(v => {
						arr.push(v.name)
					})
					this.tabs = arr
				})
			}
		},


		// 路由跳转
		jump(path, params) {
			this.$Router.push({
				path: path,
				query: params
			});
		},
	}
</script>

<style lang="scss" scoped>
	.richText {
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.page {
		position: absolute;
		top: 0;
		padding-bottom: 150rpx;
	}

	.head_box {
		width: 100%;
		position: fixed;
		z-index: 9999;
		top: 0;

		.cu-bg {
			width: 750rpx;
			overflow: hidden;
			position: absolute;
			left: 0;
			top: 0;
		}

		.nav-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
		}
	}

	.nav-bg {
		width: 750rpx;
		height: 529rpx;
		overflow: hidden;
		position: relative;

		.text {
			color: #FFFFFF;
			width: 100%;
			top: 50%;
			position: absolute;
			transform: translateY(-50%);
			font-family: shsc;
			z-index: 99;
		}
	}



	.content {
		height: 100%;

		scroll-view {
			height: 100%;
		}

		.scroll-content {
			padding-bottom: 100rpx;
		}

		.swiper-content {
			flex: 1;
			width: 100%;

			.items {
				.swiper-content {}
			}

			swiper-item {
				display: flex;
				justify-content: center;
			}

			.swiper-item {
				width: 690rpx;


				.swiper_text {
					width: 100%;
					padding: 0 40rpx 44rpx 40rpx;
					background-color: #FFFFFF;
					display: inline-block;
				}

				swiper {
					height: 260rpx;
					width: 100%;

					.swiper-item {
						background-color: #ECF5FF;
					}
				}

				.indicator {
					width: 73rpx;
					height: 33rpx;
					background-color: #000000;
					opacity: 0.4;
					border-radius: 17rpx;
					position: absolute;
					left: 40rpx;
					top: 198rpx;
					color: #FFFFFF;
					font-size: 22rpx;
					font-family: HyFTeaTime;
					line-height: 38rpx;
					text-align: center;
				}
			}

		}


	}
</style>
